<template>
    <div id="pulpCollect">
        <!-- 查询 -->
        <el-popover  v-model="popoverVisible" placement="bottom-start" width="620" style="box-shadow: 0 0 8px rgba(0,0,0,.5);" trigger="manual">
            <el-form :inline="true" :model="searchList" label-width="90px" >
                <el-form-item label="档案号" style="margin-bottom: 5px;"><el-input v-model="searchList.proivderNo" style="width: 100px;"></el-input></el-form-item>
                <el-form-item label="登记号" style="margin-bottom: 5px;"><el-input v-model="searchList.registerNo" style="width: 100px;"></el-input></el-form-item>
                <!-- <el-form-item label="认证方式" style="margin-bottom: 5px;"><el-select v-model="searchList.issuePlace" style="width: 100px;"><el-option value="" label="【空】"></el-option><el-option v-for="item in codeData26" :key="item.code" :value="item.code" :label="item.name"></el-option></el-select></el-form-item> -->
                <!-- <el-form-item label="发放方式" style="margin-bottom: 5px;"><el-select v-model="searchList.issueType" style="width: 100px;"><el-option value="" label="【空】"></el-option><el-option v-for="item in codeData25" :key="item.code" :value="item.code" :label="item.name"></el-option></el-select></el-form-item> -->
                <el-form-item label="创建时间" style="margin-bottom: 5px;"><el-date-picker v-model="searchList.time" type="daterange" style="width: 254px;" range-separator="至" start-placeholder="开始时间" end-placeholder="结束时间" align="right"></el-date-picker></el-form-item>
                <el-button type="primary" @click="searchData">提交</el-button>
            </el-form>
            <el-button slot="reference" type="primary"  @click="popoverVisible = !popoverVisible">查询</el-button>
        </el-popover>

        <!-- 表格 -->
        <el-table :data="tableData" stripe border class="company-table" :height="tableHeight" style="width: 100%;" >
            <el-table-column fixed type="index" label="*" sortable align="center" min-width="40"></el-table-column>
            <!-- <el-table-column prop="costIdx" label="费用发放序号" sortable min-width="130"></el-table-column> -->
            <el-table-column prop="registerNo" label="登记序号" sortable min-width="110"></el-table-column>
            <el-table-column prop="providerNoName" label="患者姓名" sortable min-width="110"></el-table-column>
            <el-table-column prop="baseMoney" label="收费金额(元)" sortable min-width="110"></el-table-column>
            <el-table-column prop="stateName" label="收费状态" sortable min-width="130"></el-table-column>
            <el-table-column prop="issueTypeName" label="支付途径" sortable min-width="130"></el-table-column>
            <!-- <el-table-column prop="putWorkerName" label="发放护士" sortable min-width="110"></el-table-column>
            <el-table-column prop="timesAllowance" label="频次补贴" sortable min-width="110"></el-table-column>
            <el-table-column prop="trafficFee" label="交通费" sortable min-width="110"></el-table-column>
            <el-table-column prop="putOutMoney" label="实际金额" sortable min-width="110"></el-table-column>
            <el-table-column prop="rzfsName" label="认证方式" sortable min-width="110"></el-table-column>
            <el-table-column prop="createTime" label="发放开始时间" sortable min-width="170"></el-table-column> -->
            <el-table-column fixed="right" label="操作" sortable align="center" min-width="75">
                <template slot-scope="scope">
                    <el-button  @click="updateDialog(scope.row)" type="text" size="small">编辑</el-button>
                </template>
            </el-table-column>
        </el-table>
        <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="searchList.currentPage" :page-sizes="[10, 15,20, 25,30,50, 100]" :page-size="searchList.pageSize" layout="total, sizes, prev, pager, next, jumper" :total="tableTotal"></el-pagination>

        <!-- 详情 -->
        <el-dialog title="详细信息" :visible.sync="isDialog" width="1050px" :close-on-click-modal="false" v-dialogDrag>
            <div  :style="{'height':(tableHeight-120)+'px','overflow-y':'auto'}">
                <h3 class="dialog-plate-title" style="margin: 20px 0 10px;"><span>基本信息</span></h3>
                <el-row :gutter="20" style="margin-right: 0;" >
                    <el-col :span="16">
                        <el-form :inline="true" :model="dialogList" label-width="100px" class="demo-ruleForm">
                            <el-form-item class="inputNoMb" label="档案号"><el-input v-model="dialogList.cardId" disabled></el-input></el-form-item>
                            <el-form-item class="inputNoMb" label="患者姓名"><el-input v-model="dialogList.providerNoName" disabled></el-input></el-form-item>
                            <el-form-item class="inputNoMb" label="年龄"><el-input v-model="dialogList.age" disabled></el-input></el-form-item>
                            <el-form-item class="inputNoMb" label="性别"><el-input v-model="dialogList.sex" disabled></el-input></el-form-item>
                            <el-form-item class="inputNoMb" label="身份证号"><el-input v-model="dialogList.idNo" disabled></el-input></el-form-item>
                            <el-form-item class="inputNoMb" label="电话"><el-input v-model="dialogList.phone" disabled></el-input></el-form-item>
                            <el-form-item class="inputNoMb" label="地址"><el-input v-model="dialogList.address" disabled></el-input></el-form-item>
                        </el-form>
                    </el-col>
                    <el-col :span="8" style="text-align: center;">
                        <img :src="'data:image/png;base64,'+ dialogList.providerNoPhoto" style="height: 215px;" />
                    </el-col>
                </el-row>
                <h3 class="dialog-plate-title" style="margin: 20px 0 10px;"><span>收费项目</span></h3>
                <el-table :data="costTableData" stripe border class="company-table" :v-model="costTableData">
                    <el-table-column label="名称" prop="costName"></el-table-column>
                    <el-table-column label="单价(元)" prop="price"></el-table-column>
                    <el-table-column label="数量" prop="count"></el-table-column>
                    <el-table-column label="总金额(元)" prop="total"></el-table-column>
                </el-table>
                <div >
                    <div style="float:right;margin-right:20px;font-weight:bold;color:red;">合计：741 (元)</div>
                </div>
                 <h3 class="dialog-plate-title" style="margin: 20px 0 10px;"><span>收费信息</span></h3>
                <el-row :gutter="20" style="margin-right: 0;" >
                    <el-col :span="16">
                        <el-form :inline="true" :model="dialogList" label-width="100px" class="demo-ruleForm">
                            <el-form-item class="inputNoMb" label="支付方式：">
                                  <el-radio v-model="costRadio" label="1">微信支付</el-radio>
                                <el-radio v-model="costRadio" label="2">支付宝支付</el-radio>
                                  <el-radio v-model="costRadio" label="3">现金支付</el-radio>
                                <el-radio v-model="costRadio" label="4">刷卡支付</el-radio>
                                <el-radio v-model="costRadio" label="5">医保支付</el-radio>

                            </el-form-item>
                            <el-form-item label="备注：">
                                <el-input type="textarea" v-model="dialogList.providerNoNam"  style="width:500px;"></el-input>
                            </el-form-item>
                                                    
                        </el-form>
                    </el-col>
              
                </el-row>
            </div>
            <div slot="footer">
                <el-button type="primary" @click="submitDialog">提交</el-button>
            </div>
        </el-dialog>


    </div>
</template>

<script>
import api from 'plugins/axios/api.js';
export default {
        name: "cost",
        data(){      
            let  menu   = sessionStorage.getItem("menuId");  
            let stateCost = menu === '63'? '0' : '1';
            return {
                costRadio: 1,
                tableData:[],
                tableTotal:0,
                codeData6:[],
                codeData22:[],
                codeData23:[],
                codeData25:[],
                codeData26:[],
                costTableData:[
                    {
                        costName:'置换液',
                        price:350,
                        count:2,
                        total:700
                    },
                       {
                        costName:'抗凝剂',
                        price:21,
                        count:1,
                        total:21
                    },
                       {
                        costName:'耗材',
                        price:20,
                        count:1,
                        total:20
                    }
                ],
                // 查询
                popoverVisible:false,
                searchList:{
                    currentPage:1,
                    pageSize:10,
                    proivderNo:null,
                    registerNo:null,
                    state:stateCost,
                    startCreateTime:null,
                    endCreateTime:null,
                    issuePlace:null,
                    issueType:null,
                    time:'',
                },

                //详情
                isDialog:false,
                dialogList:{
                    address: '',
                    age: '',
                    baseMoney: '',
                    baseMoneyName: '',
                    cardId: '',
                    collectionDate: '',
                    collectionId: '',
                    collectionTimes: '',
                    costIdx: '',
                    createTime: '',
                    endTime: '',
                    id: '',
                    idNo: '',
                    issuePlace: '',
                    issuePlaceName: '',
                    issueType: '',
                    issueTypeName: '',
                    phone: '',
                    photo: '',
                    providerNo: '',
                    providerNoName: '',
                    providerNoPhoto: '',
                    putOutDate: '',
                    putOutEndTime: '',
                    putOutMoney: '',
                    putOutStartTime: '',
                    putWorker: '',
                    putWorkerName: '',
                    registerNo: '',
                    rzfs: '',
                    rzfsName: '',
                    sex: '',
                    state: '',
                    stateName: '',
                    threshold: '',
                    timesAllowance: '',
                    trafficFee: '',
                    uploadReceipt: '',
                    uploadReceiptTime: '',
                    uploader: '',
                    uploaderName: ''
                },
            }
        },
        created() {
            let time = this.timestampToTime(new Date()).substr(0,10);
            let time1 = this.timestampToTime( new Date(new Date().getTime() + 24*60*60*1000) ).substr(0,10);
            this.searchList.currentPage= 1;
            this.searchList.pageSize= 10;
            this.searchList.time= [time,time1];
            this.searchList.startCreateTime=time;
            this.searchList.endCreateTime=time1;
            this.getData(this.searchList);
            this.getCodeData(6);
            this.getCodeData(22);
            this.getCodeData(23);
            this.getCodeData(25);
            this.getCodeData(26);
        },
        computed:{
            tableHeight(){
            return this.$store.state.clientHeight-184;
            }
        },
        methods: {
         
            getData(data) {
                let self = this;
                self.loading = true;
                let list = {
                    pageSize: data.pageSize,
                    currentPage: data.currentPage,
                    proivderNo:data.proivderNo,
                    registerNo:data.registerNo,
                    state:data.state,
                    startCreateTime:data.startCreateTime,
                    endCreateTime:data.endCreateTime,
                    issuePlace:data.issuePlace,
                    issueType:data.issueType,
                };
                  api.queryProviderCost(list).then(res=>{
                        self.tableData=res.content.records;
                        self.tableTotal = res.content.total;
                        self.loading=false;

                    },error=>{
                        self.loading=false;
                        self.$message.error("加载失败！请重新加载...");
                 })
            },
            //联动总金额
            totleMoney(){
              let self = this;
              //实际金额=基础金额+频次补助费+交通费
              self.dialogList.putOutMoney = 
              parseInt(self.dialogList.baseMoneyName)+
              parseInt(self.dialogList.timesAllowance)+
              parseInt(self.dialogList.trafficFee)
              //联动修改
            },
            //查询相关的code
            getCodeData(data){
                let self = this;
                    api.getCodeData(data).then(res=>{
                       if(data==6)
                        self.codeData6 = res.content;
                       if(data==22)
                        self.codeData22 = res.content;
                      if(data==23)
                        self.codeData23 = res.content;
                      if(data==25)
                        self.codeData25 = res.content;
                      if(data==26)
                        self.codeData26 = res.content;
                    });
            },
            //搜索
            searchData() {
                this.searchList.startCreateTime= this.searchList.time ? this.timestampToTime(this.searchList.time[0]).substr(0,10) : "";
                this.searchList.endCreateTime= this.searchList.time ? this.timestampToTime(this.searchList.time[1]).substr(0,10) : "";
                this.getData(this.searchList);
            },

            //详情
            updateDialog(row){
                this.isDialog = true;
                this.dialogList = row;
            },
            submitDialog(){
                let self = this;
                console.log(self.dialogList)
                /** 更新后台信息*/
                self.loading=true;
                api.addUpdataCheckRecordInfo(self.dialogList).then(res=>{
                        console.log( res );
                        self.loading=false;
                        self.isDialog=false;
                        self.$message.success('信息编辑成功！');
                        self.getData(self.searchList);
                },error=>{
                        self.loading=false;
                        self.$message.error("加载失败！请重新加载...");
                })
            },

            timestampToTime (timestamp) {
                if (timestamp) {
                    let date = new Date(timestamp);
                    let Y = date.getFullYear() + '-';
                    let M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-';
                    let D = (date.getDate() < 10 ? '0' + date.getDate() : date.getDate()) + " ";
                    let h = (date.getHours() < 10 ? '0' + date.getHours() : date.getHours()) + ":";
                    let m = (date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes()) + ":";
                    let s = (date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds());
                    return timestamp ? Y + M + D + h + m + s : '';
                } else {
                    return '';
                }
            },
            handleSizeChange(size) {
                this.searchList.pageSize = size;
                this.searchList.startCreateTime= this.searchList.time ? this.timestampToTime(this.searchList.time[0]).substr(0,10) : "";
                this.searchList.endCreateTime= this.searchList.time ? this.timestampToTime(this.searchList.time[1]).substr(0,10) : "";
                this.getData(this.searchList);
            },
            handleCurrentChange(currentPage) {
                this.searchList.currentPage = currentPage;
                this.searchList.startCreateTime= this.searchList.time ? this.timestampToTime(this.searchList.time[0]).substr(0,10) : "";
                this.searchList.endCreateTime= this.searchList.time ? this.timestampToTime(this.searchList.time[1]).substr(0,10) : "";
                this.getData(this.searchList);
            }
        },
    }
</script>

<style scoped>
    .search-col2{
        padding-left: 5px;
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
    }
    .inputWidth{
        width: 78px;
    }
    .inputNoMb{
        margin-bottom: 15px;
    }
</style>

